<template>
  <view class="content">
    <view class="contentbox" :style="'height:'+headHeight+'px;'" @click="goBack">
      <view class="container" :style="'height:'+navBarHeight+'px;top:'+imageTop+'px;'">
        <image :src="imageUrl +'left2.png'" mode="widthFix" class="logo"></image>
        <view>选择订单</view>
      </view>
    </view>
    <image :src="imageUrl +'bg.png'" mode="widthFix" class="bg-img"></image>
    <view class="list" v-for="(item,index) in list" :key="item.id" @click="toggleSelect(index)">
      <view class="left-con">
        <label>
          <checkbox :checked="item.checked" style="transform:scale(0.7)"/>
        </label>
        <!-- <image :src="imageUrl +'ss1.png'" mode="widthFix" class="s-img"></image> -->
        <view>
          <view class="details" v-if="false">
            <view>鄂E·12345</view>
            <image :src="imageUrl +'success.png'" mode="widthFix" class="z-img"></image>
          </view>
          <view class="left">支付时间：{{ item.payTime }}</view>
          <view class="left" style="padding-top: 10px;padding-bottom: 10px">
            支付方式：{{ dealPayType(item.payMode) }}
          </view>
          <view class="left">支付订单：{{ item.payId }}</view>
        </view>
      </view>
      <view class="moneys">￥
        <text>{{ formattedPayMoney(item.payMoney) }}</text>
      </view>
    </view>

    <view class="foot-box">
      <view class="foot-detail">
        <view class="select-con">

          <!-- <view class="all"> -->
          <view class="select-all">
            <checkbox-group @change="toggleSelectAll">
              <label>
                <checkbox :checked="selectAll" style="transform:scale(0.7)"/>
                全选
              </label>
            </checkbox-group>
          </view>
          <view class="left">
            已选{{ selectedCount }}个
          </view>
        </view>
        <view class="r-con">
          <view class="total">总额</view>
          <view class="price">￥{{ totalPrice.toFixed(2) }}</view>
          <view class="next" @click="nextPage">下一步</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {get} from "../../api/myHttps";
import dayjs from "dayjs";

export default {
  data() {
    return {
      headHeight: 0,
      navBarHeight: 0,
      imageTop: 0,
      right: 0,

      type: '',
      plate: '',
      list: [],
      selectAll: false,
      totalPriceN: 0
    }
  },
  onLoad(options) {
    // 获取胶囊按钮位置
    // 获取系统信息（主要是状态栏高度）
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    const systemInfo = uni.getSystemInfoSync();

    // 计算顶部总高度：从屏幕顶部到导航栏底部的距离
    const statusBarHeight = systemInfo.statusBarHeight; // 状态栏高度
    const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2; // 导航栏高度
    const totalTopHeight = statusBarHeight + navBarHeight; // 顶部总高度（含状态栏+导航栏）

    console.log('状态栏高度:', statusBarHeight);
    console.log('胶囊按钮信息:', menuButtonInfo);
    console.log('导航栏高度:', navBarHeight);
    console.log('顶部总高度:', totalTopHeight);
    this.headHeight = totalTopHeight
    this.navBarHeight = menuButtonInfo.height
    this.imageTop = menuButtonInfo.top
    this.right = menuButtonInfo.width + 20

    this.type = options.type;
    this.plate = options.plate;

    this.listOrder();
  },
  computed: {
    // 计算已选数量
    selectedCount() {
      return this.list.filter(item => item.checked).length;
    },

    // 计算总价格
    totalPrice() {
      return this.list.reduce((total, item) => {
        this.totalPriceN = item.checked ? total + item.payMoney / 100 : total;
        return item.checked ? total + item.payMoney / 100 : total;
      }, 0);
    }
  },
  methods: {
    nextPage() {
      let choseIds = [];
      this.list.forEach(item => {
        ;
        if (item.checked) {
          choseIds.push(item.payId)
        }
      });
      uni.navigateTo({
        url: '/pages/issueInvoice/issueInvoice?totalPrice=' + this.totalPriceN.toFixed(2) + '&choseIds=' + choseIds.join(",") + '&orderType=' + this.type
      })
    },
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    },
    listOrder() {
      const endDate = dayjs().format('YYYY-MM-DD') + ' 23:59:59';
      // todo：日期可选择
      const startDate = dayjs().subtract(3, 'month').format('YYYY-MM-DD') + ' 00:00:00';
      let ownerId = uni.getStorageSync("ownerId");
      get(
          `/city-mobile/invoice/listOrder?ownerId=${ownerId}&size=-1&current=1&orderType=${this.type}&startDate=${startDate}&endDate=${endDate}`
      )
          .then(res => {
            res.records.forEach(item => {
              item.checked = false;
            });
            this.list = res.records;
            console.log('订单列表', this.list);
          }).catch(err => {
        console.log('订单列表错误', err);
      })
    },

    // 切换单个选项的选择状态
    toggleSelect(index) {
      console.log("-----------");
      this.list[index].checked = !this.list[index]?.checked;
      this.updateSelectAllStatus();
    },

    // 全选/取消全选
    toggleSelectAll(e) {
      this.selectAll = e.detail.value.length > 0;
      this.list.forEach(item => {
        item.checked = this.selectAll;
      });
    },
    // 更新全选状态（当手动选择所有项时自动勾选全选）
    updateSelectAllStatus() {
      this.selectAll = this.list.every(item => item.checked);
    },
    formattedPayMoney(payMoney) {
      return Number(payMoney / 100 || 0).toFixed(2);
    },
    dealPayType(key) {
      if (key && key.indexOf("weixin") > -1) {
        return "微信";
      } else if (key && key.indexOf("ali") > -1) {
        return "支付宝";
      } else if (key == "icbc") {
        return "工商银行";
      } else if (key == "money") {
        return "现金";
      } else {
        return "微信";
      }
      return key;
    },
  }
}
</script>

<style lang="scss">
page {
  background-color: #F4FAF7;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.bg-img {
  width: 750rpx;
  height: 520rpx;
  position: absolute;
  top: 0;
}

.contentbox {
  width: 750rpx;
  position: relative;
  z-index: 999;

  .container {
    width: 750rpx;
    position: absolute;
    bottom: 0rpx;
    display: flex;
    align-items: center;
    height: 86rpx;

    .title-names {
      width: 750rpx;
      position: absolute;
      text-align: center;
    }

    .logo {
      margin-left: 18rpx;
      width: 40rpx;
      height: 40rpx;
      position: relative;
      z-index: 9999;
    }

    view {
      margin-left: 22rpx;
      font-size: 36rpx;
      color: #1C274C;
    }

    .seandcode {
      width: 64rpx;
      height: 64rpx;
      position: relative;
      z-index: 9999;
    }
  }
}

.list {
  width: 690rpx;
  padding: 20rpx 0;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  position: relative;
  border-radius: 20rpx;
  margin-top: 20rpx;
  justify-content: space-between;

  .left-con {
    display: flex;
    align-items: center;

    .details {
      display: flex;
      align-items: center;

      view {
        font-size: 36rpx;
        color: #1C274C;
        margin-left: 20rpx;
        font-weight: 600;
      }

      .z-img {
        width: 110rpx;
        height: 32rpx;
        margin-left: 10rpx;
      }
    }

    .time {
      font-size: 24rpx;
      margin-left: 20rpx;
      color: rgba(28, 39, 76, 0.60);
      margin-top: 10rpx;
    }
  }

  .moneys {
    font-size: 36rpx;
    color: #24A7CE;
    margin-right: 20rpx;

    text {
      font-weight: 600;
    }
  }

  .s-img {
    width: 32rpx;
    height: 32rpx;
    margin-left: 20rpx;
  }


}

.foot-box {
  width: 750rpx;
  background-color: #ffffff;
  height: 178rpx;
  display: flex;
  justify-content: center;
  position: fixed;
  bottom: 0;

  .foot-detail {
    width: 690rpx;
    height: 88rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20rpx;

    .select-con {
      display: flex;
      align-items: center;

      image {
        width: 32rpx;
        height: 32rpx;
      }

      .all {
        font-size: 28rpx;
        color: #1C274C;
        margin-left: 10rpx;
      }

      .num {
        font-size: 24rpx;
        color: rgba(28, 39, 76, 0.60);
        margin-left: 10rpx;

        text {
          color: #24A7CE;
          font-weight: 500;
        }
      }

      .select-all label {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        margin-right: 10rpx;
      }
    }

    .r-con {
      display: flex;
      align-items: center;

      .total {
        font-size: 24rpx;
        color: #1C274C;
      }

      .price {
        font-size: 32rpx;
        color: #FF2C41;
        font-weight: 600;
      }

      .next {
        width: 216rpx;
        height: 88rpx;
        border-radius: 50rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        font-size: 32rpx;
        background: linear-gradient(to right, #00BBFF, #5ADA7A);
        font-weight: 600;
        margin-left: 20rpx;
      }
    }
  }
}

</style>
